<template>
  <!-- 
    class类名尽可能唯一：防止和其他组件类名冲突，建议以组件名称来取类名（因为组件名称是唯一的）
   -->
  <div class="app-container">
    <!-- 搜索区域 -->
    <!-- 文档：https://element.eleme.cn/#/zh-CN/component/card -->
    <el-card shadow="never" class="brand-card">
      <!-- 
        inline 让表单变成行内表单
       -->
      <el-form inline v-show="isShowSearchForm">
        <el-form-item label="品牌名称">
          <el-input
            placeholder="请输入品牌名称"
            size="small"
            v-model="searchParams.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select size="small" v-model="searchParams.status">
            <!-- 
              label 显示的内容
              value 选中的值

              下拉列表的选项的值可以在系统管理-字典管理中查看
             -->
            <el-option label="开启" :value="0"></el-option>
            <el-option label="关闭" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <!-- 
            type="daterange"  日期范围选择器
            range-separator="至" 分割符
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd" 指定收集到数据格式
           -->
          <el-date-picker
            class="brand-date-picker"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            v-model="searchParams.createTime"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- 
            icon: https://element.eleme.cn/#/zh-CN/component/icon
           -->
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="getList"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="small" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <div class="brand-toolbox">
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-plus"
          @click="showAddForm"
        >
          新增
        </el-button>

        <el-row :gutter="10">
          <el-tooltip
            effect="dark"
            :content="`${isShowSearchForm ? '隐藏' : '显示'}搜索`"
            placement="top"
          >
            <el-button
              size="mini"
              icon="el-icon-search"
              circle
              @click="isShowSearchForm = !isShowSearchForm"
            ></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="刷新" placement="top">
            <el-button
              size="mini"
              icon="el-icon-refresh"
              circle
              @click="getList"
            ></el-button>
          </el-tooltip>
        </el-row>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card shadow="never">
      <!-- 
        data 表单要渲染的每行数据

        element-ui提供全局指令：v-loading
       -->
      <el-table :data="list" v-loading="loading" row-key="id">
        <!-- 
          label 列头文字
          prop 渲染数据哪个字段
          align="center" 居中对齐
         -->
        <el-table-column
          label="品牌编号"
          prop="id"
          align="center"
        ></el-table-column>
        <el-table-column
          label="品牌名称"
          prop="name"
          align="center"
        ></el-table-column>
        <!-- 
          如果 el-table-column 传入默认插槽，就渲染默认插槽
          el-table-column 只有没有传默认插槽，才会看 prop 的值进行渲染
         -->
        <el-table-column label="品牌图片" align="center">
          <!-- 需要使用作用域插槽，获取当前行数据和index -->
          <template v-slot="{ row }">
            <img class="brand-img" :src="row.picUrl" :alt="row.name" />
          </template>
        </el-table-column>
        <el-table-column
          label="品牌排序"
          prop="sort"
          align="center"
        ></el-table-column>
        <el-table-column
          label="品牌描述"
          prop="description"
          align="center"
        ></el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="{ row }">
            <el-tag v-if="row.status === 0">开启</el-tag>
            <el-tag type="info" v-else>关闭</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          :formatter="handleFormatDate"
          width="200"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="showUpdateForm(row)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="showDel(row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 
        @size-change="handleSizeChange" 当 page-size 发生变化时触发
        @current-change="handleCurrentChange" 当 current-page 发生变化时触发
        current-page 当前页码
        page-size 每页条数
        page-sizes 每页条数的选项
        layout="total, sizes, prev, pager, next, jumper"
        total 总数
        background 带背景
       -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        class="brand-pagination"
      >
      </el-pagination>
    </el-card>

    <UpdateBrandForm ref="updateBrandFormRef" @success="getList" />
  </div>
</template>

<script>
import {
  getProductBrandPage,
  deleteProductBrand,
} from "@/api/mall/product/brand";
import { formatDate } from "@/utils/formatTime";
import UpdateBrandForm from "./updateBrandForm.vue";

export default {
  name: "ProductBrand",
  components: {
    UpdateBrandForm,
  },
  data() {
    return {
      list: [], // 品牌列表
      total: 0, // 总数
      // 搜索参数 -> 字段名称看接口的参数名称(定义成一个对象为了方便将来发送请求使用)
      searchParams: {
        pageNo: 1,
        pageSize: 5,
        name: "",
        status: "",
        createTime: [],
      },
      loading: false,
      // 是否显示搜索表单
      isShowSearchForm: true,
    };
  },
  methods: {
    // 当每页条数发生变化时触发
    handleSizeChange(pageSize) {
      // 更新数据
      this.searchParams.pageSize = pageSize;
      // 发送请求
      this.getList();
    },
    // 当当前页码发生变化时触发
    handleCurrentChange(pageNo) {
      // 更新数据
      this.searchParams.pageNo = pageNo;
      // 发送请求
      this.getList();
    },
    // 获取品牌列表数据
    async getList() {
      this.loading = true;
      const { data } = await getProductBrandPage(this.searchParams);
      this.list = data.list;
      this.total = data.total;
      this.loading = false;
    },
    // 格式化时间
    handleFormatDate(row) {
      return formatDate(row.createTime);
    },
    // 重置
    reset() {
      // 清空搜索参数
      this.searchParams = {
        pageNo: 1,
        pageSize: 5,
        name: "",
        status: "",
        createTime: [],
      };
      // 重新搜索
      this.getList();
    },
    // 显示新增表单
    showAddForm() {
      this.$refs.updateBrandFormRef.open();
    },
    // 显示修改表单
    showUpdateForm(row) {
      // row 通过table作用域插槽获取当前行数据
      this.$refs.updateBrandFormRef.open();
      // 操作数据
      // 内部数据和外部数据指向同一个对象，内部操作数据时，外部也会发生变化
      // this.$refs.updateBrandFormRef.brandFormData = row;
      // 解决：不让他们指向同一个对象
      this.$refs.updateBrandFormRef.brandFormData = {
        ...row,
      };
    },
    // 显示删除
    async showDel(id) {
      await this.$confirm(
        `是否确认删除品牌编号为"${id}"的数据项吗?`,
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        },
      );
      await deleteProductBrand(id);
      this.$message({
        type: "success",
        message: "删除成功!",
      });
      // 重新获取数据展示
      this.getList();

      // this.$confirm(`是否确认删除品牌编号为"${id}"的数据项吗?`, "系统提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(async () => {
      //   await deleteProductBrand(id);
      //   this.$message({
      //     type: "success",
      //     message: "删除成功!",
      //   });
      //   // 重新获取数据展示
      //   this.getList();
      // });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
/* 
  scoped 样式作用域
    让组件的样式只对当前组件生效，其他组件不会生效

    1. 给当前组件的所有DOM元素，添加一个唯一的自定义属性 data-v-xxx
    2. 给当前组件的所有样式添加一个属性选择器 [data-v-xxx]

    所以：样式只能对当前组件生效

  lang="scss"
    可以使用 sass css   预处理器
*/
// .product-brand {
//   padding: 20px;
// }

.brand-date-picker {
  width: 250px;
}

.brand-toolbox {
  display: flex;
  justify-content: space-between;
}

.brand-card {
  margin-bottom: 20px;
}

.brand-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.brand-img {
  width: 100px;
  height: 100px;
}
</style>
